<!-- home -->
<template>
  <div>
    <div class="warpper">
      <van-sticky :offset-top="0">
        <van-search background="#fff" shape="round" placeholder="请输入搜索关键词" @focus="onfocus" />
      </van-sticky>
      <!-- 搜索end -->
      <van-swipe :autoplay="3000" class="my-swipe" style="margin-top: 5px">
        <van-swipe-item v-for="(image, index) in bookList" :key="index">
          <img v-lazy="imgUrls + image.coverImage" />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图end -->
      <div style="background-color: #ffffff; margin-top: 5px">
        <div style="margin-top: 5px">
          <van-grid :column-num="4" :border="false">
            <template v-for="(item, index) in menus">
              <van-grid-item :to="item.url">
                <van-image width="50" height="50" :src="imgUrls + item.pic" />
                <span>
                  <font size="3" color="">{{ item.name }}</font>
                </span>
              </van-grid-item>
            </template>
          </van-grid>
        </div>
      </div>
      <!-- 宫格end -->
      <!-- 热门 新品end -->
      <div style="width: 100%; background-color: #ffffff; margin-top: 10px">
        <div style="height: 28px; line-height: 35px; padding: 5px">
          <font size="3">精品推荐：</font>
        </div>
        <div style="margin-top: 10px">
          <van-grid :column-num="2" :border="false">
            <van-grid-item v-for="(item, index) in bookList" :key="index" :to="'/productDetails?id=' + item.id">
              <van-image :src="imgUrls + item.coverImage" height="140" />
              <span>
                <font size="2">{{ item.bookName }}</font>
              </span>
<!--              <span>-->
<!--                <font size="4" color="#ff8001">￥{{ item.price.toFixed(2) }}</font>-->
<!--              </span>-->
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div style="width: 100%; background-color: #ffffff; margin-top: 10px">
        <div style="height: 28px; line-height: 35px; padding: 5px">
          <font size="3">热度排行：</font>
        </div>
        <div style="margin-top: 10px">
          <van-card
            @click="goto('/productDetails?id=' + item.id)"
            style="background-color: #fff"
            v-for="(item, index) in hotRank"
            :key="index"
            tag="Hot"
            :desc="item.introduction"
            :title="item.bookName"
            :thumb="imgUrls + item.coverImage"
          >
<!--            <template #price>-->
<!--              <font color="#EE883B" size="4">￥{{ item.price.toFixed(2) }}</font>-->
<!--            </template>-->
          </van-card>
        </div>
      </div>
      <!-- 商品列表end -->
    </div>
  </div>
</template>

<script>
import { getPageBook } from '@/api/book.js'
export default {
  data() {
    return {
      imgUrls: this.$baseApi,
      menus: [],
      groupLists: [],
      bastList: [],
      slideshowList: [],
      hotRank: [],
      value: '',
      bookList: [] // 书籍列表
    }
  },

  created() {
    this.getData()
  },
  methods: {
    getData() {
      getPageBook().then(res => {
        this.bookList = res.rows
        this.hotRank = res.rows
      })
    },
    goto(url) {
      this.$router.push(url)
    },
    onfocus() {
      this.$router.push('/search')
    }
  }
}
</script>
<style lang="scss" scoped>
.warpper {
  background-color: #f8f8f8;
  padding: 5px;
}

.my-swipe .van-swipe-item img {
  width: 100%;
  height: 200px;
}

.my-swipe {
  margin-top: 5px;
  margin-bottom: 7px;
  height: 180px;
}

// 滚动条
.item {
  margin: 5px;
  width: 31.3%;
  white-space: nowrap;
  display: inline-block;
}

.scroll {
  padding: 5px;
  margin-top: 8px;
  background-color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

::-webkit-scrollbar {
  display: none;
}

// 滚动条
.grid2 /deep/ .van-hairline {
  align-items: flex-start;
}

.grid2 {
  background-color: #f8f8f8;
  margin-top: 8px;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  margin-left: 8px;
  height: 18px;
  width: 18px;
  color: #fff;
  font-size: 5px;
  text-align: center;
  background-color: #ff8001;
}

.classifys {
  height: 35px;
  line-height: 35px;
  padding: 15px;
}

.activity {
  background-color: #ffffff;
  margin-top: 10px;
  padding: 5px;
}

.activity-col {
  padding: 10px;
  background-color: #ffe3ce;
}
</style>
